<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>国信安-教务系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <style>
        /* 移动端 */

        @media screen and (max-width: 768px) {
            .layui-layout-admin .layui-layout-left,
            .layui-layout-admin .layui-body,
            .layui-layout-admin .layui-footer {
                left: 0;
            }
            .layui-layout-admin .layui-side {
                left: -300px;
            }
        }

        .layui-table td img {
            width: 100%;
            height: 100%;
        }

        .layui-input {
            width: 175px;
        }

        .layui-unselect {
            width: 200px;
        }
        .layui-upload-img{
            width: 92px;
            height: 92px;
        }
    </style>
    <script src="js/jquery-1.8.2.js"></script>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="js/echarts.min.js"></script>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
<script type="text/javascript">
    $(function (){

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        $.getJSON("statisticsAge",function(result){
            console.log(result);
            if(result.code==0){
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '学生年龄分布图'
                    },
                    tooltip: {},
                    legend: {
                        data: ['年龄分层']
                    },
                    xAxis: {
                        data: result.data.title//['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '人数',
                            type: 'bar',
                            data: result.data.value//[5, 20, 36, 10, 10, 20]
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }else{
                alert("没有学生信息展示");
            }
        });
    });
    </script>
</html>